<template>
    <div v-if="!obj.isLogin" class="tip">
    <span
      >您还没有登录，点击<el-link @click="router.push('/login')">这里</el-link
      >进行登录</span
    >
  </div>
  <div v-else>
    <el-descriptions
    class="margin-top"
    title="用户信息"
    :column="3"
    border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon >
            <user />
          </el-icon>
          用户名
        </div>
      </template>
      {{accountData.account.ReaderName}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon >
            <iphone />
          </el-icon>
          手机号
        </div>
      </template>
      {{accountData.account.PhoneNumber}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon >
            <tickets />
          </el-icon>
          权限
        </div>
      </template>
      <el-tag >{{accountData.account.job}}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          借阅书籍数量
        </div>
      </template>
      {{ accountData.account.number }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          欠费金额
        </div>
      </template>
      <span style="color: #F56C6C;">￥{{ accountData.account.Debt }}</span>
      <el-button v-if=" accountData.account.Debt !='0.00' " @click="dialogShow = true" style="float: right;">缴费</el-button>
    </el-descriptions-item>
  </el-descriptions>
  <el-dialog v-model="dialogShow" title="缴纳欠费" width="30%" center>
    <div style="text-align: center;">
      <div>扫码以缴费</div>
      <img style="width: 80%;" src="../../assets/QR_money.jpg" />
      <div>欠费{{ accountData.account.Debt }}元</div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="payMent">
          确认缴费
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import router from "@/router";
import { onBeforeMount, reactive, ref } from "vue";
import {
  Iphone,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import { put } from "../../stores/requestMethod";
const data = JSON.parse(sessionStorage.getItem("loginAccount"));
const obj = reactive({
  isLogin: false,
});
const accountData = reactive({
  account: [],
});
const dialogShow = ref(false)
const payMent = () => {
  put(`http://127.0.0.1:5000/users/${data.id}/${accountData.account.Debt}`,null,
  (res) => {
  })
  getAccount(data.id)
  dialogShow.value = false
}
const getAccount = (id)=>{
    fetch(`http://127.0.0.1:5000/users/${id}`,{
        credentials : 'include',
        method : 'GET',
        mode : 'cors'
    })
    .then(res => res.json())
    .then(res =>{
        console.log(res);
        accountData.account = res.data
        console.log(accountData.account);
    })
    .catch(err => console.log(err))
}
onBeforeMount(() => {
  if (data !== null) {
    getAccount(data.id)
    obj.isLogin = true;
  }
});
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
</style>